<template>
  <view>
    <view class="nav">
      <view class="status-bar"></view>
      <view
        class="nav-bar"
        :style="{ height: height.height, lineHeight: height.lineHeight }"
      >
        <view class="nav-bar-left" v-if="isBack" @tap="back">
          <uni-icons type="left" color="#fff" size="20" />
          <slot name="back-icon">返回</slot>
        </view>
        <view class="nav-bar-container"> {{ title }}</view>
        <view class="nav-bar-right" v-if="isBack"> </view>
      </view>
    </view>
    <view :style="{ height: height.navHight }"></view>
  </view>
</template>
<script>
export default {
  props: {
    title: String,
  },
  computed: {
    height() {
      const { height: capsuleHeight, top } =
        uni.getMenuButtonBoundingClientRect();
      const { platform } = uni.getSystemInfoSync();
      let height = 4; //ios 24px
      let navHight = top + capsuleHeight + 6;
      if (platform.toLowerCase() == "android") {
        height += 4; //android 28px
        navHight += 5;
      }
      // 胶囊高度 32px 下边框6px height 状态栏高度
      return {
        height: height + capsuleHeight + 6 + "px",
        lineHeight: height + capsuleHeight + "px",
        navHight: navHight + "px",
      };
    },
    isBack() {
      return getCurrentPages().length > 1;
    },
  },
  methods: {
    back() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss">
.nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: linear-gradient(to right, #03a391, #00c696);
  .status-bar {
    width: 100%;
    height: var(--status-bar-height);
  }
  .nav-bar {
    padding: 0 10px;
    color: #fff;
    display: flex;
    align-items: center;
    .nav-bar-left,
    .nav-bar-right {
      width: 120px;
    }
    .nav-bar-left {
      display: flex;
      align-items: center;
    }
    .nav-bar-container {
      flex: 1;
      text-align: center;
    }
  }
}
</style>
